<template>
  <view class="container">
    <!-- 页面标题区域 -->
    <view class="header">
      <h1 class="title">今天吃什么？</h1>
      <p class="subtitle">不知道吃啥？让我们来帮你决定！</p>
    </view>

    <!-- 食物展示卡片 -->
    <view class="food-card" :class="{ 'shaking': isShaking }">
      <image :src="currentFood.image" class="food-image" mode="widthFix" :alt="currentFood.name"></image>
      <view class="food-info">
        <h2 class="food-name">{{ currentFood.name }}</h2>
        <p class="food-desc">{{ currentFood.description }}</p>
      </view>
    </view>

    <!-- 随机选择按钮 -->
    <button class="random-btn" @click="chooseRandomFood" :disabled="isShaking">
      <i class="fa fa-random"></i>
      <span>{{ isShaking ? '选择中...' : '随机选择' }}</span>
    </button>

    <!-- 历史记录区域 -->
    <view class="history-section" v-if="history.length > 0">
      <h3 class="history-title">历史推荐</h3>
      <view class="history-list">
        <view class="history-item" v-for="(item, index) in history" :key="index">
          <span>{{ item.name }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  // 食物数据列表
  const foods = [{
      name: "火锅",
      description: "热腾腾的火锅，适合多人分享",
      image: "https://picsum.photos/seed/hotpot/600/400"
    },
    {
      name: "汉堡",
      description: "快捷美味的西式快餐",
      image: "https://picsum.photos/seed/burger/600/400"
    },
    {
      name: "寿司",
      description: "精致的日式料理",
      image: "https://picsum.photos/seed/sushi/600/400"
    },
    {
      name: "麻辣烫",
      description: "麻辣鲜香，自选食材",
      image: "https://picsum.photos/seed/mala/600/400"
    },
    {
      name: "烧烤",
      description: "香气扑鼻的烤肉",
      image: "https://picsum.photos/seed/bbq/600/400"
    },
    {
      name: "炸鸡",
      description: "外酥里嫩，配啤酒绝佳",
      image: "https://picsum.photos/seed/chicken/600/400"
    },
    {
      name: "披萨",
      description: "意大利风味的美味馅饼",
      image: "https://picsum.photos/seed/pizza/600/400"
    },
    {
      name: "牛肉面",
      description: "劲道面条配浓郁牛肉汤",
      image: "https://picsum.photos/seed/noodle/600/400"
    },
    {
      name: "炒菜",
      description: "家常美味，营养丰富",
      image: "https://picsum.photos/seed/stirfry/600/400"
    },
    {
      name: "酸菜鱼",
      description: "酸辣可口，开胃下饭",
      image: "https://picsum.photos/seed/fish/600/400"
    }
  ];

  // 状态管理
  const currentFood = ref(foods[0]); // 当前显示的食物
  const isShaking = ref(false); // 是否正在抖动动画
  const history = ref([]); // 历史记录

  // 随机选择食物的方法
  const chooseRandomFood = () => {
    // 启动抖动动画
    isShaking.value = true;

    // 1秒后停止动画并显示结果
    setTimeout(() => {
      // 随机选择一个食物
      const randomIndex = Math.floor(Math.random() * foods.length);
      currentFood.value = foods[randomIndex];

      // 添加到历史记录，最多保存5条
      history.value.unshift(foods[randomIndex]);
      if (history.value.length > 5) {
        history.value.pop();
      }

      // 停止动画
      isShaking.value = false;
    }, 1000);
  };
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 30rpx;
  }

  .header {
    text-align: center;
    margin: 50rpx 0 60rpx;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }

  .subtitle {
    font-size: 26rpx;
    color: #666;
  }

  .food-card {
    width: 100%;
    max-width: 650rpx;
    background-color: #fff;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 60rpx;
  }

  .food-image {
    width: 100%;
    height: 400rpx;
    object-fit: cover;
  }

  .food-info {
    padding: 30rpx;
    text-align: center;
  }

  .food-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }

  .food-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
  }

  .random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15rpx;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 60rpx;
    padding: 25rpx 80rpx;
    font-size: 30rpx;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 60rpx;
  }

  .random-btn:hover {
    background-color: #2980b9;
    transform: translateY(-3rpx);
  }

  .random-btn:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    transform: none;
  }

  .history-section {
    width: 100%;
    max-width: 650rpx;
  }

  .history-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: bold;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18rpx;
  }

  .history-item {
    background-color: #ebf5fb;
    color: #3498db;
    padding: 12rpx 25rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    transition: all 0.2s ease;
  }

  .history-item:hover {
    background-color: #d6eaf8;
    transform: scale(1.05);
  }

  /* 抖动动画效果 */
  .shaking {
    animation: shake 0.5s ease-in-out infinite;
  }

  @keyframes shake {

    0%,
    100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-15rpx);
    }

    40% {
      transform: translateX(15rpx);
    }

    60% {
      transform: translateX(-10rpx);
    }

    80% {
      transform: translateX(10rpx);
    }
  }
</style>